import React, { Component, useState, useEffect, useRef } from 'react'
import { MyScroll } from '../../components'
import mineStyle from '../mine/mine.module.scss'
import { useCallbackState } from '../../utils/useCallbackState'
import { arr } from '../../mock'

// 模拟异步接口
const createData = ({ page = 1, size = 10 }) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(arr.slice((page - 1) * size, page * size))
    }, 1000)
  })
}

const DemoBs = () => {
  const [flag, setFlag] = useState(false)
  // const [list, setList] = useState([])
  const [list, setList] = useCallbackState([])
  const loading = useRef(true)
  const opt = useRef({ page: 1, size: 5 })

  const pullDown = useRef(null)
  const pullUp = useRef(null)

  useEffect(() => {
    fetchBsList({}).then((list) => {
      setList(list)
      setFlag(true)
    })
  }, [])

  // async 返回 promise
  const fetchBsList = async ({ page = opt.current.page, size = opt.current.size }) => {
    const list = await createData({ page, size })
    return list
  }

  return (
    <div style={{ height: '100%' }}>
      <MyScroll
        flag={flag}
        handlePullingDown={(pullDown) => {
          fetchBsList({}).then((list) => {
            setList(list)
            pullDown && pullDown()
          })
        }}
        handlePullingUp={(pullUp) => {
          if (loading.current) {
            loading.current = false
            // setOpt({ ...opt, page: opt.page + 1 })
            opt.current.page++
            fetchBsList({ page: opt.current.page }).then((arr) => {
              console.log('qian:', list, arr)
              loading.current = true
              let brr = list.concat(arr)
              setList([...list, ...arr])
              // console.log('更新:', list)
              // // setTimeout(() => {
              pullUp && pullUp()
              // }, 5000)
            })
          }
        }}
      >
        {list.map((item) => {
          return (
            <div key={item.id} className={mineStyle['bs-item']}>
              {item.productName}
            </div>
          )
        })}
      </MyScroll>
    </div>
  )
}

export default DemoBs
// export default class index extends Component {
//   state = {
//     page: 1,
//     size: 5,
//     list: [],
//     flag: false,
//   }

//   componentDidMount() {
//     this.fetchBsList({}).then((list) => {
//       this.setState({ list, flag: true })
//     })
//   }

//   // async 返回 promise
//   fetchBsList = async ({ page = this.state.page, size = this.state.size }) => {
//     const list = await createData({ page, size })
//     return list
//     // 1. 上拉 拼接
//     // 2. 下拉
//   }

//   // handlePullingDown
//   // handlePullingUp

//   loading = true
//   render() {
//     return (
//       <div style={{ height: '100%' }}>
//         <MyScroll
//           flag={this.state.flag}
//           handlePullingDown={(pulldown) => {
//             this.fetchBsList({}).then((list) => {
//               this.setState({ list })
//               // pulldown 函数是为了监听父组件 是否请求完毕数据
//               pulldown && pulldown()
//             })

//             // 请求刷新数据
//             console.log(pulldown, 'pulldown')
//           }}
//           handlePullingUp={(pullup) => {
//             if (this.loading) {
//               // ++ page
//               // 关闭开关
//               this.loading = false
//               this.setState({ page: this.state.page + 1 })
//               this.fetchBsList({ page: this.state.page }).then((list) => {
//                 // 打开开关
//                 this.loading = true
//                 this.setState({ list: [...this.state.list, ...list] })
//                 // pullup 告诉子组件，请求完毕，子组件负责，结束上拉
//                 pullup && pullup()
//               })
//             }
//           }}
//         >
//           {this.state.list.map((item) => {
//             return (
//               <div key={item.id} className={mineStyle['bs-item']}>
//                 {item.productName}
//               </div>
//             )
//           })}
//         </MyScroll>
//       </div>
//     )
//   }
// }
